<template>
	<div v-loading="loading" class="vip-points">
		<!-- 头部 -->
		<div class="top">
			<app-main-title title="会员积分" />
			<!-- Tips-->
			<div class="top-tips app-main-tips-box">
				<div class="title">
					<i class="el-icon-warning" />
					积分说明
				</div>
				<ul>
					<li>
						1.积分是会员赚到的一种虚拟财产。你向用户提供获取的途径（比如鼓励用户升级、付费、填写资料、各种活跃任务等等），以及消耗的途径（兑换，抽奖，第三方合作等等）。
					</li>
					<li>2.你可以指定积分的对象是那些会员可以参与的，一般我们是建议参与的对象是所有等级的会员。</li>
					<li
						v-if="
							!$store.getters.banBtnList.includes('BTN_ADD_POINTS_MALL_PRODUCT') ||
								!$store.getters.banBtnList.includes('BTN_CHANGE_POINTS_MALL_PRODUCT_STATUS') ||
								!$store.getters.banBtnList.includes('BTN_POINTS_MALL_PRODUCT_EDIT') ||
								!$store.getters.banBtnList.includes('TAB_POINTS_CONFIG')
						"
					>
						3.积分商城是一个会员消耗积分的很好方法，你可以点击前往【
						<a href class="btn" @click.prevent="goVipPointsMall"><u>积分商城</u></a>
						】上架会员可以消耗的优惠券或者其他商品。
					</li>
				</ul>
			</div>
		</div>

		<!-- tab -->
		<div class="tab">
			<el-tabs v-model="tabName">
				<el-tab-pane label="基础设置" name="config"><points-config :tab-name="tabName" :form="form" :default-form="defaultForm" @initData="initData" /></el-tab-pane>
				<el-tab-pane label="积分的获取" name="earn"><points-earn :tab-name="tabName" :form="form" :default-form="defaultForm" /></el-tab-pane>
				<el-tab-pane label="积分的使用" name="use"><points-use :tab-name="tabName" :form="form" :default-form="defaultForm" /></el-tab-pane>
			</el-tabs>
		</div>
	</div>
</template>

<script>
import PointsConfig from './components/PointsConfig';
import PointsEarn from './components/PointsEarn';
import PointsUse from './components/PointsUse';
import { getPointsConfig } from '@/api/points';
export default {
	components: {
		PointsConfig,
		PointsEarn,
		PointsUse
	},
	data() {
		return {
			tabName: 'config',
			loading: false,
			form: {},
			defaultForm: {}
		};
	},
	created() {
		// 定义全局获取积分配置方法
		this.$root.$on('pointsResetConfig', res => {
			this.resetConfig(res);
		});
	},

	mounted() {
		if (this.$route.params.hasOwnProperty('tabName') && this.$route.params.tabName) {
			this.tabName = this.$route.params.tabName;
		}
		// 获取积分配置
		this.initData();
	},
	destroyed() {
		this.$root.$off('pointsResetConfig');
	},
	methods: {
		/**
		 * 获取数据
		 */
		// 获取积分配置
		initData() {
			this.loading = true;
			getPointsConfig()
				.then(res => {
					const data = this.resetData(res.data);
					this.defaultForm = Object.assign({}, data);
					this.form = data;
				})
				.finally(() => {
					this.loading = false;
				});
		},

		// reset 积分配置
		resetConfig(res) {
			const data = this.resetData(res);
			this.defaultForm = Object.assign({}, data);
			this.form = data;
		},

		// 格式化数据
		resetData(res) {
			// 格式化时间
			if (res.clearDate) {
				res.clearDate = res.clearDate.split('-');
			} else {
				res.clearDate = [];
			}
			// 格式化金额
			res.bonusRatio = res.bonusRatio / 100;
			res.deduction = res.deduction / 100;
			res.deductionLimit = res.deductionLimit / 100;
			return res;
		},

		/**
		 * 按钮组
		 */
		// 跳转积分商城
		goVipPointsMall() {
			if (this.defaultForm.enablePoints) {
				this.$router.push({
					name: 'VipPointsMall'
				});
			} else {
				this.$alert('积分功能未启用，如果需要开启请前往基础设置中启用积分', '温馨提示', {
					confirmButtonText: '确定',
					type: 'warning',
					center: true,
					callback: action => {}
				});
			}
		}
	}
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.top {
	padding: 24px 30px;
	border-radius: 5px 5px 0 0;
	background-color: #fff;
}
</style>
<style rel="stylesheet/scss" lang="scss">
/* reset element*/
.vip-points {
	.tab {
		.el-tabs__header {
			padding-left: 30px;
			margin-bottom: 10px;
			background-color: #fff;
			border-radius: 0 0 5px 5px;
		}
		.el-tabs__nav-wrap::after {
			background-color: #fff;
		}
		.el-tabs__active-bar {
			height: 4px;
		}
	}
}
</style>
